import PageHeaderWrapper from "@/components/PageHeaderWrapper";
import { searchUserTag, userTagDelete } from "@/services/labelManage";
import tableDataCheck from "@/utils/isBackPrevPage";
import { Button, Card, Form, Input, message, Modal, Table, Pagination } from "antd";
import React from "react";
import EditLabel from "./editLabel";

class LabelManage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      current: 1,
      size: 10,
      list: [],
      loading: false,
      total: 0
    }
  }

  componentDidMount() {
    this.getList()
  }

  getList = () => {
    this.setState({
      loading: true
    }, async () => {
      const { current, size } = this.state;
      const formInfo = this.props.form.getFieldsValue()
      const res = await searchUserTag({ current, size, tagName: formInfo.tagName })
      this.setState({
        loading: false,
        list: res.records,
        total: res.total
      })
    })
  }

  queryByCondition = (current, size) => {
    this.setState({
      current,
      size
    }, () => {
      this.getList()
    })
  }

  showTotal = (total) => {
    const { size } = this.state;
    let allPage = Math.ceil(total / size);
    return `共${allPage}页/${total}条数据`;
  }

  openDrawer = (row) => {
    this.EditLabel.onOpenDrawer(row)
  }

  confirmDelete = id => {
    const that = this;
    Modal.confirm({
      title: '是否确定删除该标签',
      okText: '确定',
      cancelText: '取消',
      okType: 'danger',
      onOk() {
        that.doDelete(id)
      }
    })
  }

  doDelete = async id => {
    const res = await userTagDelete({ tagId: id })
    message.info(res.msg)
    const { current, size, list } = this.state;
    const newCurrent = tableDataCheck(list, current)
    this.queryByCondition(newCurrent, size)
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const { current, size, list, loading, total } = this.state;
    const columns = [
      {
        title: '标签ID',
        dataIndex: 'id',
        width: 150
      },
      {
        title: '用户标签',
        dataIndex: 'tagName',
        width: 200
      },
      {
        title: '操作',
        width: 100,
        render: (text, row) => {
          return (
            <div>
              <Button type="primary" style={{ marginRight: 10 }} onClick={() => this.openDrawer(row)}>编辑</Button>
              <Button type="danger" onClick={() => this.confirmDelete(row.id)}>删除</Button>
            </div>
          )
        }
      }
    ]
    const addBtnStyle = { position: 'absolute', top: '50%', right: 0, transform: 'translateY(-50%)' }
    return (
      <PageHeaderWrapper>
        <Card bordered={false} style={{ height: '100%' }}>
          <div style={{ position: 'relative', marginBottom: 20 }}>
            <Form layout="inline">
              <Form.Item>
                {getFieldDecorator('tagName', { initialValue: '' })(<Input placeholder="请输入标签名称" />)}
              </Form.Item>
              <Form.Item>
                <Button type="primary" onClick={() => this.queryByCondition(1, 10)}>查询</Button>
              </Form.Item>
            </Form>
            <Button type="primary" style={addBtnStyle} onClick={() => this.openDrawer()}>添加</Button>
          </div>

          <Table
            columns={columns}
            rowKey={'id'}
            loading={loading}
            dataSource={list}
            pagination={false}
          />
          {total > 10 ? (
            <Pagination
              style={{ textAlign: 'right', marginTop: 16 }}
              total={total}
              current={current}
              pageSize={size}
              showQuickJumper={true}
              // showSizeChanger={true}
              showTotal={this.showTotal}
              onChange={this.queryByCondition}
              // onShowSizeChange={this.queryByCondition}
            />
          ) : null}

          <EditLabel onRef={ref => this.EditLabel = ref} refreshList={() => this.queryByCondition(1, 10)} />
        </Card>
      </PageHeaderWrapper>
    )
  }
}

export default Form.create()(LabelManage)